import { defineComponent, ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElFormItem, ElDatePicker } from 'element-plus'

import type { FormValuesType } from './typings'
import type { TableColumnProps, ProSaasTableExposeType } from '~/components/ProSaasTable/typings'

import ProSaasTable from '~/components/ProSaasTable'
import useVuexGetters from '~/hooks/useVuexGetters'
import ColorfulBadge from '~/components/ColorfulBadge'
import dayjs from 'dayjs'
import ColorfulBadgeMore from '~/components/ColorfulBadgeMore'

export default defineComponent(function Demo() {
  const router = useRouter()
  const store = useStore()
  const proSaasTableRef = ref<ProSaasTableExposeType>()
  const formValues = reactive<FormValuesType>({
    value: []
  })
  const policeState = useVuexGetters('police', ['alarmStatusEnum'])
  const columns: TableColumnProps<FormValuesType>[] = [
    {
      label: '警报时间',
      prop: 'reportTime',
      minWidth: 160,
      showOverflowTooltip: true
    },
    {
      label: '恢复时间',
      prop: 'recoverTime',
      minWidth: 160,
      showOverflowTooltip: true
    },
    {
      label: '警报名称',
      prop: 'alarmName',
      minWidth: 160,
      showOverflowTooltip: true
    },
    {
      label: '开关',
      prop: 'loopName',
      minWidth: 160,
      showOverflowTooltip: true
    },
    {
      label: '线路/相位',
      prop: 'loopPhase',
      minWidth: 160,
      showOverflowTooltip: true
    },
    {
      label: '警报值',
      prop: 'alarmValue',
      minWidth: 160,
      showOverflowTooltip: true
    },
    {
      label: '警报状态',
      prop: 'alarmState',
      minWidth: 160,
      showOverflowTooltip: true,
      enumValues: policeState.alarmStatusEnum,
      render: (option, value) => (
        <ColorfulBadge
          value={value}
          enumKey={option.row.alarmState as unknown as number}
          options={{ success: 0, warning: 1 }}
        />
      )
    },
    {
      label: '工单状态',
      prop: 'orderState',
      minWidth: 160,
      showOverflowTooltip: true,
      render: (option, value) => (
        <ColorfulBadgeMore
          value={value}
          enumKey={option.row.orderState as string}
          options={{
            success: '已归档',
            warning: ['待确认', '待发送', '待处理', '待分配', '待归档', '待终结'],
            danger: '未推送'
          }}
        />
      )
    },
    {
      label: '是否保护',
      prop: 'protectState',
      minWidth: 160,
      showOverflowTooltip: true,
      render: (option, value) => {
        const str = value === 1 ? '是' : '否'
        return (
          <ColorfulBadge
            value={value === 1 ? '是' : '否'}
            enumKey={str as unknown as number}
            options={{ success: '是', info: '否' }}
          />
        )
      }
    }
  ]

  onMounted(() => {
    //  警报状态
    store.dispatch('police/AlarmStatusOpt', { code: 'device_alarm_state' })

    const time1 = dayjs().format('YYYY-MM-DD')
    const time2 = dayjs(time1).subtract(7, 'day').format('YYYY-MM-DD')
    formValues.beginTime = time2
    formValues.endTime = time1
    formValues.value = [time2, time1]
    setTimeout(() => {
      proSaasTableRef.value!?.toSearch()
    }, 50)
  })

  return () => {
    // 日期变时 搜索
    const props = {
      onChange: () => {
        setTimeout(() => {
          proSaasTableRef.value!?.toSearch()
        }, 500)
      }
    }
    const { id } = router.currentRoute.value.query
    return (
      <div>
        <ProSaasTable<FormValuesType>
          ref={proSaasTableRef}
          columns={columns}
          searchParams={{
            alarmInfoId: id,
            beginTime: formValues.value?.[0],
            endTime: formValues.value?.[1]
          }}
          searchFormProps={{
            model: formValues
          }}
          dispatchType="police/HistoryAlarmList"
          searchformResponsiveCol={[
            <ElFormItem key="deliverDate" prop="deliverDate">
              <ElDatePicker
                v-model={formValues.value}
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                valueFormat="YYYY-MM-DD"
                format="YYYY-MM-DD"
                type="daterange"
                {...props}
              />
            </ElFormItem>
          ]}
        />
      </div>
    )
  }
})
